/**
 * v-waves
 * 水波纹动画
 * 注意：使用该指令必须给 当前选择器 设置 字体颜色，避免动画颜色错误
 */

import { App } from 'vue';
import './waves.css';

const context = '@@wavesContext';

//16进制颜色值转化为rgb
function colorRgb(color: string): string {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  // var color = this.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = '#';
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var n = 1; n < 7; n += 2) {
      colorChange.push(parseInt('0x' + color.slice(n, n + 2)));
    }
    return 'RGB(' + colorChange.join(',') + ')';
  } else {
    return color;
  }
}

//颜色转换
function colorChange(color: string, alpha: number): string {
  let rgbaVal = '';
  if (/^#/.test(color)) {
    colorChange(colorRgb(color), alpha);
  } else if (/^(rgba|RGBA)/.test(color)) {
    rgbaVal = color.substring(5, color.lastIndexOf(','));
  } else if (/^(rgb|RGB)/.test(color)) {
    rgbaVal = color.substring(4, color.length - 1);
  }
  return `rgba(${rgbaVal},${alpha})`;
}

function handleClick(el: HTMLElement, binding: any) {
  function handle(e: any) {
    const customOpts = Object.assign({}, binding.value);
    // console.log(window.getComputedStyle(el)); //读取元素全部属性
    const opts = Object.assign(
      {
        ele: el, // 波纹作用元素
        type: 'hit', // hit 点击位置扩散 center中心点扩展
        color: colorChange(window.getComputedStyle(el).color, 0.26), // 波纹颜色
      },
      customOpts
    );
    const target = opts.ele;
    if (target) {
      target.style.position = 'relative';
      target.style.overflow = 'hidden';
      const rect = target.getBoundingClientRect();
      let ripple = target.querySelector('.waves-ripple');
      if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'waves-ripple';
        ripple.style.height = ripple.style.width =
          Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
      } else {
        ripple.className = 'waves-ripple';
      }
      switch (opts.type) {
        case 'center':
          ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px';
          ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px';
          break;
        default:
          ripple.style.top =
            (e.pageY -
              rect.top -
              ripple.offsetHeight / 2 -
              document.documentElement.scrollTop || document.body.scrollTop) +
            'px';
          ripple.style.left =
            (e.pageX -
              rect.left -
              ripple.offsetWidth / 2 -
              document.documentElement.scrollLeft || document.body.scrollLeft) +
            'px';
      }
      ripple.style.backgroundColor = opts.color;
      ripple.className = 'waves-ripple z-active';

      if (!el[context]) {
        el[context] = {
          removeHandle: handle,
        };
      } else {
        el[context].removeHandle = handle;
      }
      return false;
    }
  }

  return handle;
}

export default (app: App<Element>) => {
  //自定义组件
  app.directive('waves', (el: HTMLElement, binding) => {
    el.addEventListener('click', handleClick(el, binding), false);
  });
};
